<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>allBooks.ejs</title>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<style>
			.books{
				width: 100%;
				height: 1800px;
				border:1px solid gold;
			
			}
			.books .left{
				width: 15%;
				height: 1800px;
				background-color: black;
				opacity: 0.5;
				float: left;
				
			}
			.books .left ul{
				height: 150px;
				border-bottom: 1px solid antiquewhite;
				margin:0 5px;
			}
			
			.books .left ul .title{
				font-size: 20px;
				font-weight: bold;
				height: 20px;
				margin: 5px 0;
			}
			.books .left ul .left-list{
				
				float: left;
				width: 50px;
				height: 30px;
				margin: 5px 2px;
			}
			#l-list-3 .left-list{
				width: 100px;
				margin: 10px 0;
			}
			#l-list-4 .left-list{
				width: 200px;
				margin: 10px 0;
			}
			.books .right{
				width: 85%;
				height: 1800px;
				
				float: right;
			}
			.books .right .message{
				width: 480px;
				height: 200px;
			
				float: left;
				margin:  25px ;
			}
			.books .right .message .book-img{
				width: 200px;
				height: 200px;
				
				float: left;
			}
			.books .right .message .book-img img{
				width: 200px;
				height: 200px;
			}
			.books .right .message .book-info{
				float: left;
				width: 280px;
				height: 200px;
				
			}
			.books .right .message .book-info h2{
				margin: 2px 0;
				color: black;
			}
			.books .right .message .book-info .author{
				margin: 2px 0;
			}
            .books .right .message .book-info .author a{
				margin:0 5px ;
			}
			.books .right .message .book-info .brief{
				height: 110px;
				color: black;
				font-size: 14px;
				overflow: hidden;
			}
			.books .right .message .book-info .wordCount{
				line-height: 25px;
				color: navajowhite;
			}
		</style>
	</head>
	<body>
		<% include banner.ejs %> 
		
		<div class="books">
			<div class="left">
				<ul id="booksList">
					<li class="title">作品分类</li>
					<%for(var i=0;i<cs.length;i++){%>
					<li class="left-list"><a href="/d?classB=<%=cs[i].classification%>"><%=cs[i].classification%></a></li>
					<%}%>
				</ul>
				<ul>
					<li class="title">状态</li>
					<li class="left-list"><a href="#">全部</a></li>
					<li class="left-list"><a href="#">连载</a></li>
					<li class="left-list"><a href="#">完本</a></li>
					
				</ul>
				<ul id="l-list-3">
					<li class="title">字数</li>
					<li class="left-list"><a href="#">30-50万字</a></li>
					<li class="left-list"><a href="#">50-100万字</a></li>
					<li class="left-list"><a href="#">100-200万字</a></li>
					<li class="left-list"><a href="#">200万字以上</a></li>
				</ul >
				<ul id="l-list-4">
					<li class="title">品质</li>
					<li class="left-list"><a href="#">签约作品</a></li>
					<li class="left-list"><a href="#">精品小说</a></li>
					
				</ul>
				<ul>
					<li class="title">更新时间</li>
					<li class="left-list"><a href="#">3日内</a></li>
					<li class="left-list"><a href="#">7日内</a></li>
					<li class="left-list"><a href="#">半月内</a></li>
					<li class="left-list"><a href="#">一月内</a></li>
				</ul>
			</div>
			<div class="right">
				<%for(var i=0;i<books.length;i++){%>
					<div class="message">
					<div class="book-img">
						<a href="/f?id=<%=books[i].id%>">
						<img src="../imgs/<%=books[i].bookImg%>.jpg"/>
						</a>
					</div>
					<div class="book-info">
						<h2><%=books[i].bookName%></h2>
						<p class="author">
							<a href="#"><%=books[i].author%></a>
							<span>|</span>
							<a href="#"><%=books[i].bookClass%></a>
							<span>|</span>
							<a href="#"><%=books[i].state%></a>
						</p>
						<p class="brief">
							<%=books[i].brief%>
						</p>
						<p class="wordCount"><%=books[i].wordCount%>
							<span >
								万字
							</span>
						</p>
					</div>
				</div>
				<%}%>
				
				
			</div>
		</div>
	</body>
	
</html>